<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>



    <style>
                p{


                    font-size: 30px;
                }
                    /* 
                    伪元素,表示页面中一些特殊的并不真实存在的元素(特殊的位置)
                    伪元素使用::开头
                    
                    ::first-letter 表示第一个字母


                    ::first-line 表示第一行

                        ::selection 表示选中的内容

                        ::before    元素开始的位置
                        ::after     元素的最后
                            -before 和after 必须结合content属性来使用
                    */
            p::first-letter{

                font-size: 60px;
            }

            p::first-line{


                color: aqua;
            }

            p::selection{

                background-color: blue;
            }

            div::before{
                content: 'abc';
                color: chartreuse;
            }

            div::after{
                content: 'abc';
                color: chartreuse;
            }

    </style>
</head>
<body>
    

    <q>hello</q>

    <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, unde quidem corrupti incidunt nobis neque aut. Repudiandae molestiae, officia exercitationem omnis repellendus possimus nesciunt quas consectetur accusamus ad fugit quasi.
    </p>

    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic labore nostrum atque fugit sed consequuntur quas in ad quo velit expedita, iusto quaerat iste quia molestiae, error maiores aliquid! Quia!</div>

</body>
</html>